{% load static %}
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- SEO优化部分 -->
    <title>{% block title %}学生管理平台{% endblock %}</title>
    <meta name="description" content="{% block description %}学生管理系统后台管理界面{% endblock %}">
    <meta name="keywords" content="{% block keywords %}学生管理, 后台系统, 管理员面板{% endblock %}">
    <link rel="canonical" href="{% block canonical %}{{ request.build_absolute_uri }}{% endblock %}">

    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="{% static 'css/all.min.css' %}">

    <!-- LayUI样式 -->
    <link rel="stylesheet" href="{% static 'css/layui.css' %}">

    <!-- 自定义CSS -->
    <style>
        /* 全局基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* 站点标题样式 */
        .layui-logo .site-title {
            font-family: 'Microsoft YaHei', sans-serif;
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 5px #1E9FFF, 0 0 10px #1E9FFF;
            letter-spacing: 2px;
            display: inline-block;
        }

        /* 主体内容区域 */
        .main-wrapper {
            padding: 20px;
        }

        .content-card {
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 20px;
            min-height: calc(100vh - 120px);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .layui-hide-lg {
                display: block !important;
            }
        }

        /* 自定义菜单高亮 */
        .layui-nav-tree .layui-this > a {
            background-color: #009688 !important;
            color: #fff !important;
        }

        .layui-nav-tree .layui-this {
            background-color: rgba(0, 150, 136, 0.1) !important;
        }
    </style>
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <!-- 头部区域 -->
        <header class="layui-header layui-bg-blue">
            <div class="layui-logo">
                <i class="layui-icon layui-icon-form"></i>
                <span class="site-title">学生管理平台</span>
            </div>

            <!-- 移动端菜单按钮 -->
            <div class="mobile-menu-btn" id="mobile-menu-btn">
                <i class="layui-icon layui-icon-spread-left" style="font-size: 24px;"></i>
            </div>

            <!-- 顶部导航菜单 -->
            <ul class="layui-nav layui-layout-right">
                <!-- 用户菜单 -->
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-user"></i> 管理员</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#"><i class="layui-icon layui-icon-user"></i> 个人中心</a></dd>
                        <dd><a href="#"><i class="layui-icon layui-icon-logout"></i> 退出登录</a></dd>
                    </dl>
                </li>
                <!-- 通知菜单 -->
                <li class="layui-nav-item">
                    <a href="#"><i class="layui-icon layui-icon-notice"></i> 消息<span class="layui-badge-dot"></span></a>
                </li>
            </ul>
        </header>

        <!-- 左侧导航菜单 -->
        <nav class="layui-side layui-bg-blue">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree layui-bg-blue" lay-filter="nav" lay-shrink="all">
                    <!-- 班级信息（默认展开） -->
                    <li class="layui-nav-item layui-nav-itemed" data-permission="user,admin">
                        <a href="javascript:;"><i class="layui-icon layui-icon-form"></i> 班级信息</a>
                        <dl class="layui-nav-child">
                            <dd data-permission="admin"><a href="javascript:;" data-url="/class/list/"><i class="layui-icon layui-icon-list"></i> 班级列表</a></dd>
                            <dd data-permission="admin"><a href="javascript:;" data-url="/waiting/"><i class="layui-icon layui-icon-more"></i> 待开发</a></dd>
                        </dl>
                    </li>

                    <!-- 学生信息（默认折叠） -->
                    <li class="layui-nav-item" data-permission="user,admin">
                        <a href="javascript:;"><i class="layui-icon layui-icon-form"></i> 学生信息</a>
                        <dl class="layui-nav-child">
                            <dd data-permission="admin"><a href="javascript:;" data-url="/student/list/"><i class="layui-icon layui-icon-list"></i> 学生列表</a></dd>
                            <dd data-permission="admin"><a href="javascript:;" data-url="/waiting/"><i class="layui-icon layui-icon-more"></i> 待开发</a></dd>
                        </dl>
                    </li>

                    <!-- 资产信息（默认折叠） -->
                    <li class="layui-nav-item" data-permission="user,admin">
                        <a href="javascript:;"><i class="layui-icon layui-icon-form"></i> 资产信息</a>
                        <dl class="layui-nav-child">
                            <dd data-permission="admin"><a href="javascript:;" data-url="/asset/list/"><i class="layui-icon layui-icon-list"></i> 资产列表</a></dd>
                            <dd data-permission="admin"><a href="javascript:;" data-url="/waiting/"><i class="layui-icon layui-icon-more"></i> 待开发</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- 主体内容区域 -->
        <main class="layui-body">
            <div class="main-wrapper">
                <div class="content-card">
                    {% block content %}{% endblock %}
                </div>
            </div>
        </main>
    </div>

    <!-- 移动端遮罩层 -->
    <div class="layui-hide-lg" id="mobile-mask"></div>

    <!-- 引入LayUI JavaScript库 -->
    <script src="{% static 'js/layui.js' %}"></script>
    <script>
        layui.use(['element', 'jquery', 'layer'], function () {
            // 缓存常用对象（减少DOM查询）
            var element = layui.element;
            var $ = layui.jquery;
            var layer = layui.layer;
            var $body = $('body');
            var $sideNav = $('.layui-side');
            var $mobileMenuBtn = $('#mobile-menu-btn');
            var $mobileMask = $('#mobile-mask');
            var $layuiNavTree = $('.layui-nav-tree');

            // 初始化element组件
            element.init();

            // 页面加载时设置默认展开状态（关键优化点）
            $(document).ready(function() {
                // 默认展开班级信息（添加layui-nav-itemed类）
                $('.layui-nav-item[data-title="班级信息"]').addClass('layui-nav-itemed');
                // 默认折叠其他菜单（移除layui-nav-itemed类）
                $('.layui-nav-item[data-title="学生信息"], .layui-nav-item[data-title="资产信息"]').removeClass('layui-nav-itemed');
            });

            // 移动端菜单控制（事件委托优化）
            $mobileMenuBtn.on('click', function () {
                $sideNav.toggleClass('layui-show');
                $mobileMask.toggleClass('layui-show');
            });

            // 遮罩层点击关闭菜单
            $mobileMask.on('click', function () {
                $sideNav.removeClass('layui-show');
                $mobileMask.removeClass('layui-show');
            });

            // 窗口大小变化响应（带防抖优化）
            var resizeTimer;
            $(window).on('resize', function () {
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(function() {
                    if ($(window).width() <= 768) {
                        $sideNav.removeClass('layui-show');
                        $mobileMask.removeClass('layui-show');
                    } else {
                        $sideNav.removeClass('layui-show');
                        $mobileMask.removeClass('layui-show');
                    }
                }, 200); // 200ms防抖，减少频繁触发
            }).trigger('resize');

            // 权限控制（仅检查主菜单，减少循环次数）
            $('.layui-nav-item').each(function () {
                var $item = $(this);
                var permission = $item.data('permission');
                if (permission && permission !== 'user,admin' && permission !== 'admin') {
                    $item.addClass('layui-hide');
                }
            });

            // 统一处理菜单点击（事件委托优化）
            $layuiNavTree.on('click', 'a[data-url]', function (e) {
                e.preventDefault();
                var $this = $(this);
                var url = $this.data('url');
                var parentMenu = $this.closest('.layui-nav-item');

                // 展开父级菜单（仅当未展开时）
                if (!parentMenu.hasClass('layui-nav-itemed')) {
                    parentMenu.addClass('layui-nav-itemed');
                }

                // 显示加载动画
                var loading = layer.load(2);

                // 更新菜单选中状态
                $layuiNavTree.find('a[data-url]').removeClass('layui-this');
                $this.addClass('layui-this');

                // 异步加载内容
                $.ajax({
                    url: url,
                    type: 'GET',
                    dataType: 'html',
                    cache: false,
                    success: function (res) {
                        layer.close(loading);
                        $('.content-card').html(res);
                        element.render(); // 重新渲染组件
                    },
                    error: function (xhr) {
                        layer.close(loading);
                        layer.msg('加载失败：' + (xhr.statusText || '网络错误'));
                    }
                });
            });
        });
    </script>
</body>
</html>